<template>
    <!-- 6-1政策法规 -->
    <div class="container">
        <Breadcrumb :list="['政策法规']" />
        <div class="main">
            <div class="nav">
                <el-card class="box-card" body-style="padding:10px 0">
                    <div v-for="(item, index) in navArr" :key="index" class="text item" @click.native="clickNav(index)"
                        :class="index == dynamic ? 'active' : ''"><a>{{ item }}</a></div>
                </el-card>
            </div>
            <div class="detail">
                <div class="content">
                    <div class="title">
                        <div class="a"></div>
                        <span>中央法规</span>
                    </div>
                    <div class="CardTList">
                        <div v-for="o in 10" :key="o" class="text item flex">
                            <div class="ellipsis">{{ `&middot;&nbsp;`+  'List item List item List item List item List item List item List item List item List item List item List item List item List item List item ' + o }}</div>
                            <div class="btn flex-0 ml-20">
                                <el-button type="primary" class="iconfont" size="small">&#xe852;预览</el-button>
                                <el-button type="success" class="iconfont" size="small">&#xe63e;下载</el-button>
                            </div>
                        </div>
                        
                    </div>
                    <div class="pagination mt-10">
                        <el-pagination
                          v-model:current-page="currentPage4"
                          :small="small"
                          :disabled="disabled"
                          :background="background"
                          layout="total,  prev, pager, next,"
                          :total="400"
                          prev-text="上一页"
                          next-text="下一页"
                          @size-change="handleSizeChange"
                          @current-change="handleCurrentChange"
                        />
                      </div>
                </div>

            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import Breadcrumb from '@/components/Breadcrumb.vue';
import { ref } from 'vue';
const dynamic = ref(0)
const navArr = ref(["中央法规", "辽宁省法规", "其他法规"])
const clickNav = (index:any) => {
    dynamic.value = index;
}
const currentPage4 = ref(1);
const small = ref(false);
const background = ref(true);
const disabled = ref(false);

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
};
</script>

<style scoped lang="less">
@import "@/assets/style/common.less";
.main {
    overflow: hidden;
    .nav {
        float: left;

        .text {
            font-size: 18px;
            line-height: 60px;
        }

        .item {
            height: 60px;
            text-align: center;
            align-items: center;
        }

        .box-card {
            width: 196px;

            div.active{
                background-color:#009CF2 ;
                color: #FFFFFF;
            }
        }
    }

    .detail {
        width: 900px;
        float: right;
        background: #FFFFFF;
        padding: 0 40px 20px 40px;

        .title {
            padding: 40px 0 22px 0;
            span {
                font-size: 24px;
                line-height: 30px;
            }
            position: relative;
            .a {
                width: 6px;
                height: 24px;
                line-height: 48px;
                background: #009CF2;
                position: absolute;
                top: 45px;
                left: -12px;
              }
        }
        .CardTList{
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .text {
                font-size: 16px;
                color: #222222;
                line-height: 40px;
              }
              .btn{
                float: right;
                font-weight: 400;
              }
        }
        .pagination{
            float: right;
        }

    }
}
</style>
